@import '~@jxstjh/ant-design-vue/lib/style/themes/default.less';

@border-radius-circle: 12px;

.textOverflow() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

.textOverflowMulti(@line: 3, @bg: #fff) {
  position: relative;
  max-height: @line * 1.5em;
  margin-right: -1em;
  padding-right: 1em;
  overflow: hidden;
  line-height: 1.5em;
  text-align: justify;

  &::before {
    position: absolute;
    right: 14px;
    bottom: 0;
    padding: 0 1px;
    background: @bg;
    content: '...';
  }

  &::after {
    position: absolute;
    right: 14px;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: white;
    content: '';
  }
}

// mixins for clearfix
// ------------------------
.clearfix() {
  zoom: 1;

  &::before,
  &::after {
    display: table;
    content: ' ';
  }

  &::after {
    clear: both;
    height: 0;
    font-size: 0;
    visibility: hidden;
  }
}

// color
.text-primary-1 {
  color: @primary-1;
}

.text-primary-2 {
  color: @primary-2;
}

.text-primary-3 {
  color: @primary-3;
}

.text-primary-4 {
  color: @primary-4;
}

.text-primary-5 {
  color: @primary-5;
}

.text-primary,
.text-primary-6 {
  color: @primary-6;
}

.text-primary-7 {
  color: @primary-7;
}

.text-primary-8 {
  color: @primary-8;
}

.text-primary-9 {
  color: @primary-9;
}

.bg-primary-1 {
  background-color: @primary-1;
}

.bg-primary-2 {
  background-color: @primary-2;
}

.bg-primary-3 {
  background-color: @primary-3;
}

.bg-primary-4 {
  background-color: @primary-4;
}

.bg-primary-5 {
  background-color: @primary-5;
}

.bg-primary,
.bg-primary-6 {
  background-color: @primary-6;
}

.bg-primary-7 {
  background-color: @primary-7;
}

.bg-primary-8 {
  background-color: @primary-8;
}

.bg-primary-9 {
  background-color: @primary-9;
}

@color-type: {
  primary: '@{primary-color}';
  info: '@{info-color}';
  success: '@{success-color}';
  processing: '@{processing-color}';
  error: '@{error-color}';
  warning: '@{warning-color}';
}

each(@color-type, {
    .text-@{key} {
      color: color(~`colorPalette(@{value}, 6) `);
    }

    .bg-@{key} {
      background-color: color(~`colorPalette(@{value}, 6) `);
    }
  }

);

.generate-color(@n, @i: 1) when (@i =< @n) {

  .text-info-@{i} {
    color: color(~`colorPalette('@{info-color}', @{i}) `);
  }

  .text-success-@{i} {
    color: color(~`colorPalette('@{success-color}', @{i}) `);
  }

  .text-processing-@{i} {
    color: color(~`colorPalette('@{processing-color}', @{i}) `);
  }

  .text-error-@{i} {
    color: color(~`colorPalette('@{error-color}', @{i}) `);
  }

  .text-warning-@{i} {
    color: color(~`colorPalette('@{warning-color}', @{i}) `);
  }

  .bg-info-@{i} {
    background-color: color(~`colorPalette('@{info-color}', @{i}) `);
  }

  .bg-success-@{i} {
    background-color: color(~`colorPalette('@{success-color}', @{i}) `);
  }

  .bg-processing-@{i} {
    background-color: color(~`colorPalette('@{processing-color}', @{i}) `);
  }

  .bg-error-@{i} {
    background-color: color(~`colorPalette('@{error-color}', @{i}) `);
  }

  .bg-warning-@{i} {
    background-color: color(~`colorPalette('@{warning-color}', @{i}) `);
  }



  .generate-color(@n, (@i + 1));
}

.generate-color(10);


// margin

@space: {
  llg: 32px;
  lg: 24px;
  md: 16px;
  sm: 12px;
  xs: 8px;
  xss: 4px;
  0: 0
}

each(@space, {
    .m-@{key} {
      margin: @value;
    }

    .ml-@{key} {
      margin-left: @value;
    }

    .mr-@{key} {
      margin-right: @value;
    }

    .mt-@{key} {
      margin-top: @value;
    }

    .mb-@{key} {
      margin-bottom: @value;
    }

    .p-@{key} {
      padding: @value;
    }


    .pl-@{key} {
      padding-left: @value;
    }

    .pr-@{key} {
      padding-right: @value;
    }

    .pt-@{key} {
      padding-top: @value;
    }

    .pb-@{key} {
      padding-bottom: @value;
    }

    .px-@{key} {
      padding-left: @value;
      padding-right: @value;
    }

    .py-@{key} {
      padding-top: @value;
      padding-bottom: @value;
    }

    .mx-@{key} {
      margin-left: @value;
      margin-right: @value;
    }

    .my-@{key} {
      margin-top: @value;
      margin-bottom: @value;
    }
  }

);


.JPortal {
  &.ant-tabs {
    .ant-tabs-nav-wrap {
      margin-bottom: 0px !important;
    }

    .ant-tabs-bar {
      border-bottom-color: transparent;
      margin-bottom: @padding-xs;
    }

    .ant-tabs-ink-bar {
      display: none !important;
      height: 0 !important;
    }

    &.ltr {
      .ant-tabs-nav-container {
        text-align: left;
      }
    }

    .ant-tabs-nav-container {
      text-align: right;
    }

    .ant-tabs-nav {
      .ant-tabs-tab {
        margin: 0 @padding-xs 0 0;
        padding: @padding-xs/4 @padding-sm;
        border: 1px solid @primary-color;
        border-radius: @border-radius-base*8;
        color: @primary-color;
        background-color: @primary-1;

        &.ant-tabs-tab-active {
          color: #fff;
          background-color: @primary-color;
        }
      }
    }
  }

  &.ant-radio-group-solid {
    .ant-radio-button-wrapper {
      margin-right: @padding-sm;
    }

    &.ant-radio-group-small {
      .ant-radio-button-wrapper {
        margin-right: @padding-xs;
      }
    }

    &.ant-radio-group-large {
      .ant-radio-button-wrapper {
        margin-right: @padding-md;
      }
    }

    .ant-radio-button-wrapper {
      background-color: @primary-1;
    }

    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
      background-color: @primary-color;
      color: #fff;
    }
  }

  &-GIS.ant-modal {
    .ant-modal-close {
      color: @white;

      .ant-modal-close-x {
        width: 40px;
        height: 40px;
        line-height: 40px;
      }
    }

    .ant-modal-header {
      padding: 8px 12px;
      color: @white;
      background: @primary-color;
      border-bottom: 1px solid #e8e8e8;
      border-radius: 4px 4px 0 0;

      .ant-modal-title {
        color: @white;
      }
    }

    .ant-modal-body {
      padding: 12px;
    }
  }
}

// arc gis 
#gisContainer {
  .esri-popup {
    &--is-docked {
      top: 80px;
      left: 16px;
    }

    &__main-container {
      border-radius: @border-radius-base;
    }

    &__header {
      border-radius: @border-radius-base @border-radius-base 0 0;

      &-title {
        b {
          color: #fff !important;
        }
      }

      &-title:hover {
        background-color: @primary-color;
      }

      background-color: @primary-color;
      color: #fff
    }

    &__content {
      border-radius: 0 0 @border-radius-base @border-radius-base;
      ;
    }

    &__button {
      color: #fff !important;

      &:hover {
        color: @primary-color;
        background: #fff !important;
      }
    }

  }
}